<template>
  <header-bar class="header-bar" lwidth="100px" rwidth="100px">
    <div class="left" slot="left">
      <div class="left-content" v-show="isIndex">
        <span class="iconfont iconzuojiantou-copy" @click="back"></span>
        |
        <span class="iconfont iconshouye" @click="goHome"></span>
      </div>
    </div>
    <div class="center" slot="center">{{ title }}</div>
  </header-bar>
</template>

<script>
import HeaderBar from "components/common/header/HeaderBar";

export default {
  name: "IndexHeader",
  data() {
    return {
      title: "IMusic",
    };
  },
  components: {
    HeaderBar,
  },
  computed: {
    isIndex() {
      return !this.$route.path.includes("index");
    },
  },
  methods: {
    goHome() {
      this.$router.replace("/index").catch((err) => {});
    },
    back() {
      // 或者是一个go(-1)
      this.$router.back();
    },
  },
};
</script>

<style lang="less" scoped>
.header-bar {
  position: sticky;
  top: 0px;
  width: 100vw;
  height: 75px;
  line-height: 75px;
}
.center {
  font-size: 18px;
}
.left {
  display: flex;
  align-items: center;
  padding-left: 12px;
  .left-content {
    flex: 1;
    display: flex;
    height: 30px;
    padding: 0 2px;
    color: #fff;
    line-height: 30px;
    border-radius: 14px;
    background-color: rgba(100, 100, 100, 0.2);
    span {
      flex: 1;
      font-size: 16px !important;
    }
  }
}
</style>